<template>
  <div style="padding-bottom: 40px;padding-top: 45px;">
    <div :class="$style.head">
      <p :class="$style.public">公共信息</p>
      <p :class="$style.desc">为你揭示社区动态和最新活动</p>
    </div>
    <setting-item v-for="(item, index) in itemsPublic" :key="index"
      :userCode="this.userCode"
      :enabledSet="settingEnable[item.name]"
      :name="item.name"
      :text="item.text"
      :icon="item.icon"
      :icon-width="item.iconWidth"
      :icon-height="item.iconHeight"
      :can-close="item.canClose"
    />
    <div :class="$style.head">
      <p :class="$style.public">关于我的</p>
      <p :class="$style.desc">只推送于我有关的信息或本地信息</p>
    </div>
    <setting-item v-for="(item, index) in itemsPrivate" :key="index"
      :userCode="this.userCode"
      :enabledSet="settingEnable[item.name]"
      :name="item.name"
      :text="item.text"
      :icon="item.icon"
      :icon-width="item.iconWidth"
      :icon-height="item.iconHeight"
      :can-close="item.canClose"
    />
  </div>
</template>

<script>
  import SettingItem from '../components/SettingItem'
  import { mapState } from 'vuex'

  export default {
    data () {
      return {
        itemsPublic: [{
        //   name: 'meiri',
        //   text: '每日精选牛人言论',
        //   icon: 'meiri',
        //   iconWidth: '19',
        //   iconHeight: '16',
        //   canClose: true
        // }, {
        //   text: '最新牛人 LIVE信息',
        //   icon: 'live',
        //   iconWidth: '20',
        //   iconHeight: '12'
        // }, {
          name: 'JY_DIRECTION',
          text: '社区交易动向',
          icon: 'shequ',
          iconWidth: '17',
          iconHeight: '16',
          canClose: true
        }, {
          enabled: true,
          text: '每日新建比赛活动',
          icon: 'bisai',
          iconWidth: '19',
          iconHeight: '17'
        }, {
          name: 'SQ_JYB_DYNAMIC',
          text: '社区小伙伴兑换君元宝动向',
          icon: 'yuanbao',
          iconWidth: '21',
          iconHeight: '13',
          canClose: true
        }, {
          name: 'SQ_MEDAL_DYNAMIC',
          text: '社区勋章动向',
          icon: 'xunzhang',
          iconWidth: '15',
          iconHeight: '21',
          canClose: true
        }, {
          name: 'USER_WON_INFO',
          text: '比赛战况播报',
          icon: 'zhankuang',
          iconWidth: '19',
          iconHeight: '17',
          canClose: true
        }, {
          text: '老何又发表了新的复盘文章',
          icon: 'laohe',
          iconWidth: '17',
          iconHeight: '19'
        }, {
          name: 'JXNG_NEW_ARTICLE',
          text: '精选牛股今日又有新推荐',
          icon: 'niugu',
          iconWidth: '19',
          iconHeight: '19',
          canClose: true
        }, {
          name: 'TS_INFO',
          text: '社区偷师组合动向',
          icon: 'toushi',
          iconWidth: '18',
          iconHeight: '17',
          canClose: true
        // }, {
        //   name: 'liangrong',
        //   text: '社区模拟两融动态',
        //   icon: 'liangrong',
        //   iconWidth: '15',
        //   iconHeight: '15',
        //   canClose: true,
        //   hasBorder: false
        }
        ],
        itemsPrivate: [{
        //   text: '显示免费金牌组合推荐',
        //   icon: 'jinpai'
        // }, {
          text: '本地有最新个人排名赛',
          icon: 'bendi',
          iconWidth: '18',
          iconHeight: '17'
        }, {
        //   name: 'GM_LOCAL',
        //   text: '本地有最新团队PK赛',
        //   icon: 'tuandui',
        //   iconWidth: '20',
        //   iconHeight: '17',
        //   canClose: true
        // }, {
          name: 'JYB_OF_FOLLOWEES',
          text: '有人向我贡献金元宝',
          icon: 'dingyue',
          iconWidth: '17',
          iconHeight: '17',
          canClose: true
        // }, {
        //   name: 'xiangtong',
        //   text: '有人跟我参加了相同的比赛',
        //   icon: 'xiangtong',
        //   iconWidth: '18',
        //   iconHeight: '18',
        //   canClose: true
        // }, {
        //   name: 'yanlun',
        //   text: '我订阅的人有了新言论',
        //   icon: 'yanlun',
        //   iconWidth: '14',
        //   iconHeight: '19',
        //   canClose: true
        }, {
          name: 'GM_OF_FOLLOWER',
          text: '我订阅的人报名了比赛',
          icon: 'baoming',
          iconWidth: '18',
          iconHeight: '18',
          canClose: true,
          hasBorder: 'false'
        }
        ]
      }
    },
    components: {
      SettingItem
    },
    computed: {
      ...mapState([
        'settingEnable'
      ])
    },
    activated () {
      window.scrollTo(0, 0)
    }
  }
</script>

<style lang="less" module>
  .head {
    display: flex;
    height: 42px;
    line-height: 42px;

    p {
      margin: 0;
    }
  }

  .public {
    font-size: 16px;/*no*/
    color: #565656;
    padding-left: 21px;
    position: relative;

    &::before {
      position: absolute;
      left: 14px;
      top: 15px;
      width: 4px;
      height: 13px;
      border-radius: 99px;
      background-color: #33A9F4;
      content: '';
    }
  }

  .desc {
    font-size: 12px;/*no*/
    color: #999;
    padding-left: 10px;
  }
</style>
